<style lang="less">
</style>
<template>
  <div class="tem-div">
    <!--搜索-->
    <Card class="tem-card">
      <div class="search-item" :style="searchItemStyle">
        <Form ref="searchForm" label-position="right" inline :label-width="60" class="frm-search">
          <FormItem label="司机姓名">
            <i-input placeholder="司机姓名" v-model="searchData.name"></i-input>
          </FormItem>
          <FormItem label="手机号">
            <i-input placeholder="手机号" v-model="searchData.phone"></i-input>
          </FormItem>
          <!-- <FormItem label="司机卡号">
            <i-select placeholder="车挂类型" clearable v-model="searchData.usetype">
                <i-option v-for="item in carTypeArray" :value="item.label" :key="item.label">{{item.label}}</i-option>
            </i-select>
          </FormItem> -->
          <FormItem label="所属机构">
                <Poptip placement="bottom" v-model="showPoptip" style="width: 100%;">
                <Input ref="pId" v-model="searchObj.orgName" @on-focus="handlerFocus" @on-keydown="clearOrgId" placeholder="请选择所属机构"></Input>
                <div class="api" ref="tree" slot="content" style="text-align: left;">
                  <Tree :data="orgTree" @on-select-change="handleSelectTree"></Tree>
                </div>
              </Poptip>
          </FormItem>
          <FormItem label="员工状态">
            <i-select placeholder="员工状态" clearable v-model="searchData.employeesState">
              <template v-for="item in employeesStateArray">
                <i-option :value="item.value" :key="item.value">{{item.label}}</i-option>
              </template>
            </i-select>
          </FormItem>
        </Form>
      </div>
      <div class="search-btn">
        <hy-icon-btn @click="changeSearchDiv" :text="searchDiv?'收起更多':'展开更多'" :iconType="searchDiv?'chevron-up':'chevron-down'" iconSize="12"></hy-icon-btn>
        <Button type="primary" @click="search(1)" icon="search" :loading="searchListLoading">搜索</Button>
        <i class="search-i"></i>
        <Button class="search-btn-plus" type="ghost" v-btnAuth="{code: 'userAdd'}" icon="plus" @click="() => this.$router.push('/position/driver/driverAddorEdit')">新增</Button>
      </div>
    </Card>
    <!--按钮-->
    <!--<Card class="tem-card">
      <div style="text-align: left">
        <i-button v-btnAuth="{code: 'carAdd'}" @click="() => this.$router.push('/position/carBaseInfo/carInfo')">新增</i-button>
      </div>
    </Card>-->
    <!--表格-->
    <Card class="tem-card">
      <!--table部分-->
      <Table border :columns="columnsTitle" :loading="searchListLoading" :data="list" @on-selection-change="handleSelectionChange"></Table>
      <br>
      <!-- 分页 -->
      <Page :total="totalElement"
            :current="searchData.pageNum"
            size="small"
            show-elevator
            show-sizer
            show-total
            style="text-align: right;"
            @on-change="search"
            @on-page-size-change="pageSizeChange"
            :page-size-opts="pageSizeOpts"
      ></Page>
    </Card>
  </div>
</template>
<script>
  import fetch from './service';
  import orgService from '@/page/main/userManage/org/service';
  import list from '@/js/mixins/list';

  export default {
    components: {},
    mixins: [list],
    data () {
      return {
        loading: false,
        // 查询条件
        searchObj: {
          orgId: '',
          orgName: ''
        },
        orgTree: [],
        showPoptip: false,
        columnsTitle: [
          {
            key: 'name',
            title: '司机姓名',
            width: 120
          },
          // {
          //   key: 'carnum',
          //   title: '车牌号',
          //   width: 120
          // },
          {
            key: 'orgName',
            title: '所属机构'
          },
          {
            key: 'phone',
            title: '手机号'
          },
          {
            key: 'identityCard',
            title: '身份证号',
            width: 170
          },
          {
            key: 'jobNumber',
            title: '司机编号'
          },
          {
            key: 'currentResidence',
            title: '当前居住地'
          },
          {
            title: '操作',
            key: 'action',
            width: 180,
            fixed: 'right',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                this._hyTool.createIconBtn(h, params, this.editItem, '编辑', 'edit', 20, {color: '#2db7f5'}, 'carEdit'),
                this._hyTool.createIconBtn(h, params, this.deleteItem, '删除', 'trash-a', '', {color: 'red'}, 'carDelete')
              ]);
            }
          }
        ],
        employeesStateArray: [
          {
            value: 0,
            label: '在职'
          },
          {
            value: 1,
            label: '离职'
          }
        ]
      };
    },
    created () {
      // 初始化组织树
      this.getOrgTree();
    },
    methods: {
      _getList () {
        // 作用合并搜索条件
        fetch.getList(Object.assign(this.searchData, this.searchObj)).then(this.callback);
      },
      editItem (row) {
        this.$router.push({
            path: '/position/driver/driverAddorEdit',
            query: {
              id: row.id
            }
        });
      },
      deleteItem (row) {
        this.$Modal.confirm({
          title: '提示',
          content: '是否删除司机：' + row.name,
          onOk: () => {
            let payload = {id: row.id};
            fetch.deleteApi(payload).then((data) => {
              this.$Notice.success({title: '删除成功'});
              this.search();
            });
          }
        });
      },
      // 选择组织树
      getOrgTree () {
        // 获取机构树
        let opt = {id: 1};
        orgService.getTree(opt).then((result) => {
          // 展开父级节点
          this.$set(result.data, 'expand', true);
          this.orgTree = [result.data];
        });
      },
      handlerFocus () {
        // 获取父级节点文本框宽度
        let inputWidth = this.$refs.pId.$el.offsetWidth;
        // 设置树div宽度
        this.$refs.tree.style.width = inputWidth - 32 + 'px';
      },
      clearOrgId () {
        if (this.searchObj.orgName) {
          this.searchObj.orgId = '';
        }
      },
      handleSelectTree (node) {
        this.searchObj.orgName = node[0].title;
        this.searchObj.orgId = node[0].id;
        this.showPoptip = false;
      }
    }
  };
</script>
